<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .list {
        width: 80px;
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <input type="button" value="新增" @click="add">
        <input type="text" v-model="keyword" placeholder="请输入关键字">
        <table>
            <tr v-for="(item,index) in list">
                <td>
                    <input class="list" type="text" v-model="item.id" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.tite" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.imports" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.text" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.cat" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.atou" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input class="list" type="text" v-model="item.time" :disabled="disabledarr[index]">
                </td>
                <td>
                    <button @click="endit(index,item.id)">编辑</button>
                    <input type="button" value="删除" @click="del(item.id)">
                    <button @click="cofim_endit(index,item.id)" v-show="display">保存编辑</button>
                </td>
            </tr>
        </table>
        <table>
            tite:<input type="text" v-model="addobj.tite"> <br> imports:
            <input type="text" v-model="addobj.imports">
            <button @click="save">保存</button>
        </table>
    </div>


    <script src="./vue.js"></script>
    <script src="./jquery-3.6.0.min.js"></script>

    <script>
        let baseUrl = 'http://localhost:8000/blog'



        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                list: [],
                keyword: '',
                disabledarr: [1, 2],
                display: false,
                addobj: {}
            },
            watch: {
                keyword() {
                    this.ajax_home('get', {
                        "obj": this.keyword
                    })
                }
            },
            methods: {
                ajax_home(method, obj) {
                    $.ajax({
                        url: baseUrl,
                        method: method,
                        data: obj,
                        success: (res) => {
                            this.list = res
                            this.disabledarr = []
                            for (let i = 0; i < this.list.length; i++) {;
                                this.disabledarr.push(true)
                            }
                        }
                    });
                },
                query() { /*因为watch,我就是一个摆设*/ },
                add() {
                    console.log('add');
                },
                save() {
                    this.ajax_home('post', this.addobj)
                    this.addobj = {}

                },
                endit(index, id) {
                    this.disabledarr.splice(index, 1, false)
                    this.display = true

                },
                cofim_endit(index, id) {
                    this.ajax_home('put', (this.list)[index])
                        // this.disabledarr.splice(index, 1, true)
                    this.display = false
                },
                del(id) {
                    this.ajax_home('delete', {
                        "obj": id
                    })
                }
            },
            created: function() {
                this.ajax_home('get', {
                    "obj": ''
                })
            }
        })
    </script>
</body>

</html>